import React, { Component } from 'react'

// 高阶组件(HOC) 就是一个普通的函数，该函数参数为一个组件，返回一个新组件
/*
    React 高阶组件：
    1. 可以将一些重复使用的数据函数等放在一个高阶组件中
    2. 使用的时候，可以直接调用即可得到一个新的组件
    3. 高阶组件的特点：是一个普通的函数，该函数参数为一个组件，返回一个新组件
       可以在新的组件中注入一些公共的数据标签或者函数等。
*/

// 定义一个函数,接收一个参数(参数是一个组件),有一个返回值，返回值是一个新的组件
function withFooter(Com) {

    class Footer extends Component {

        state = {
            title: '你笑起来真好看'
        }

        render() {
            return (
                <>
                    <Com title={this.state.title} />

                    <footer style={{ backgroundColor: '#f66', height: 50 }}> 页脚部分 </footer>
                </>
            )
        }
    }

    return Footer
}




const Page1 = withFooter((props) => {
    return <>
        <h1>page1 页面 - {props.title} </h1>
    </>
})


let Page2 = (props) => {
    return <>
        <h1>page2 页面 - {props.title} </h1>
    </>
}
Page2 = withFooter(Page2)

export default class App extends Component {
    render() {
        return (
            <div>
                <Page1 />
                <hr />
                <Page2 />
            </div>
        )
    }
}
